<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ page import="org.apache.shiro.authc.ExcessiveAttemptsException"%>
<%@ page import="org.apache.shiro.authc.IncorrectCredentialsException"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
  <title>职位搜索</title>
<style type="text/css">
.index-login.form-horizontal .control-label {
  width: 55px;
  text-align: center;
}
.index-login.form-horizontal .controls {
  margin-left: 60px;
}
#search_text_caption {
  height: 32px;
  padding: 0;
  list-style: none;
}
#search_text_caption li {
  width: 64px;
  height: 27px;
  _height: 27px;
  margin-right: 3px;
  padding-top: 5px;
  background-color: #cee4f8;
  text-align: center;
  color: #7796D5;
  list-style: none;
  float: left;
  cursor: pointer;
}
#search_text_caption li.on {
  background-color: #7796d5;
  color: #ffffff;
}
#search_txt {
  width: 184px;
}
#select_area {
  width: 95px;
  height: 31px;
  background: url(http://img01.51jobcdn.com/im/2012/index/search_list.gif) no-repeat;
  cursor: pointer;
  border: none;
  font-size: 13px;
  text-align: center;
  padding-right: 27px;
}
</style>
<script>
var selectAreaModalLoaded = false;
$(document).ready(function() {
  $('#select_area').click(function() {
    if (!selectAreaModalLoaded) {
      $.get('${ctx}/helper/select-area-modal', function(html) {
        $('#select_area_modal').html(html);
        callSelectAreaModal();
        selectAreaModalLoaded = true;
      });
    } else {
      callSelectAreaModal();
    }
  });

  $('#search_txt').focus();

  <c:choose>
  <c:when test="${not empty param.search_EQ_province}">
  $('#select_area_hidden').attr('name', 'search_EQ_province').val(${param.search_EQ_province});
  </c:when>
  <c:when test="${not empty param.search_EQ_city}">
  $('#select_area_hidden').attr('name', 'search_EQ_city').val(${param.search_EQ_city});
  </c:when>
  </c:choose>
});

function callSelectAreaModal() {
  SelectAreaModal.init();
  $('#select_area_modal').data('callback', updateSelectedArea).modal('show');
}

function updateSelectedArea(selectedArea) {
  if (selectedArea) {
    var hidden = $('#select_area_hidden');
    if (selectedArea[0]) {
      if (selectedArea[0].length === 2) {
        hidden.attr('name', 'search_EQ_province');
      } else if (selectedArea[0].length === 6) {
        hidden.attr('name', 'search_EQ_city');
      }
      hidden.val(selectedArea[0]);
    } else {
      hidden.removeAttr('name').removeAttr('value');
    }
    $('#select_area').val(selectedArea[1]);
  }
}
</script>
</head>

<body>
  <form id="search_form" action="${ctx}/jobsearch/keyword" method="post" class="form-horizontal">
    <div class="row">
      <ul id="search_text_caption" class="span3">
        <li id="search_LIKE_keyword" class="on">搜索职位</li>
      </ul>
      <div class="span3">
        <a href="#">高级搜索</a>
        <a href="#">地图搜索</a>
      </div>
    </div>
    <div class="row">
      <div class="span3">
        <input type="text" id="search_txt" name="search_LIKE_keyword" value="${param.search_LIKE_keyword}"/>
      </div>
      <div class="span3">
        <input type="button" id="select_area" value="选择地区" />
        <input type="hidden" id="select_area_hidden" />
        <input id="submit_btn" class="btn btn-primary" type="submit" value="搜索" />
      </div>
    </div>
  </form>
  <div id="select_area_modal" class="modal hide fade"></div>

  <div class="row">
    <tags:sort/>
  </div>
    <table id="contentTable" class="table table-striped table-bordered table-condensed">
        <thead><tr><th>职务名称</th><th>公司名称</th><th>工作地点</th><th>更新日期</th></tr></thead>
        <tbody>
        <c:forEach items="${positions.content}" var="position">
            <tr>
                <td><a href="${ctx}/jobsearch/position/${position.id}">${position.name}</a></td>
                <td><a href="${ctx}/jobsearch/company/${position.companyId}">${position.companyName}</a></td>
                <td>${position.provinceName}-${position.cityName}</td>
                <td>${position.refreshDate}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <tags:pagination page="${positions}" paginationSize="25"/>

</body>
</html>
